<template>
 <!-- @getParmas="getList" -->
 <el-input
     placeholder="请输入"
    v-model="values"
    readonly
    @click.stop="showDialog"
   
  >
  <template #suffix>
    <el-icon><ArrowDown /></el-icon>
  </template>
  </el-input>
 <div>
  <ComDialog
    v-model="dialogVisible"
    title="计量表"
    :width="dialogWidth"
  >
   <TableV2
      ref="tableV2Ref"
 :selection="true"
      :tableOptions="{
        border: true,
       height: 400,
      }"
     :apiFunction="listUser"
      
     :filter="filters"
      :columns="state.columnData"
      :tableEvents="{
        selectionChange:handleselectionChangeRow
      }"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <el-button type="primary" @click="handleAdd">新增计量表</el-button>
        </div>
      </template>

    </TableV2>
    <AddOrEdit v-model="addEditDrawer" :id="meterId" @update="getList" />
    <template #footer>
      <div>
        <el-button size="large" @click="handleClose">取消</el-button>
        <el-button
          size="large"
          
          type="primary"
          @click="submitData"
          >保存</el-button
        >
      </div>
    </template>
  </ComDialog>
      
 </div>
 
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick, computed, toRaw, shallowRef } from "vue";
import { delUser, listUser,getUser } from "../api";
import Column from "/@ts/components/table/Column";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import {
  AddOrEdit
} from './index';
import formatTool, { itemLabel } from "/@ts/hooks/format";
import { useI18n } from "vue-i18n";
import { dialogWidth } from "/@ts/enums/sizeEnum";
const dialogVisible = shallowRef(false);
const values = ref("")
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: [String],
    default: "",
  },
  
  placeholder: {
    type: String,
    required: true,
    default: "请选择",
  },
  
  multiple: {
    type: Boolean,
    default: false,
  },
  border: {
    type: Boolean,
    default: false,
  },
  pageInfo: {
    type: Object,
    default: null,
  },
  options: {
    type: Object,
    default: () => ({ label: "meterNumber", value: "meterId" }),
  },
  filter: {
    type: Object,
    default: () => ({}),
  },
});
const { t } = useI18n();
watch(() => props.modelValue, (val) => {
  if(val){
 getUser(val).then((res: ResponseConfig) => {
   values.value= res.data[props.options.label];

  });
  }
},{
  immediate:true
})
const handleClose = () => {
  dialogVisible.value = false;
}
const tableData = ref([]);
let dict: any = reactive({
  point_type: [],
});
const filters = computed(() => {
  return  toRaw(props.filter)
});
onMounted(async() => {
});
const meterId = shallowRef("");
const handleEdit = (row: any) => {
  addEditDrawer.value = true;
  meterId.value = row.meterId;
};

const addEditDrawer = shallowRef(false);

const tableV2Ref = ref();

const showDialog = () =>{
dialogVisible.value = true
}

const state: any = reactive({
  height: 0,
  columnData: [
     
    {
      label: "计量表编号",
      prop: "meterNumber",
      visible: true,
  
      renderHeader: ({ column }: any) => {
        return (
          <filterBox
            title={column.label}
            valueKey={column.property}
            flterType="input"
            onChange={tableV2Ref.value.handleFilterBox}
            data={tableV2Ref.value.formFilter}
          ></filterBox>
        );
      },
    },
    {
      label: "计量表名称",
      prop: "meterName",
      visible: true,
   
            renderHeader: ({ column }: any) => {
        return (
           <filterBox
            title={column.label}
            valueKey={column.property}
            flterType="input"
            onChange={tableV2Ref.value.handleFilterBox}
            data={tableV2Ref.value.formFilter}
          ></filterBox>
        );
      },
    },
        {
      label: "计量表类型",
      prop: "meterType",
      visible: true,
      render: ({ row }: any) => {
        return <el-link>{itemLabel(row.meterType)}</el-link>;
      },
            renderHeader: ({ column }: any) => {
        return (
          <filterBox
            title={column.label}
            valueKey={column.property}
            dictCode="meter_type"
            onChange={tableV2Ref.value.handleFilterBox}
            data={tableV2Ref.value.formFilter}
          ></filterBox>
        );
      },
    },
    {
      label: "计量值单位",
      prop: "unit",
      visible: true,
    },

    {
      label: "创建时间",
      visible: true,
      prop: "createdTime",
    },
    {
      label: "更新时间",
      prop: "updatedTime",
      visible: true,
    },
  ],
  tableData: [],
});

const handleAdd = () => {
  meterId.value = "";
  addEditDrawer.value = true;
};
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};


const getList = (param?: any) => {
  // tableV2Ref.value.paramsALL
tableV2Ref.value.getList()
};
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    "此操作将永久删除 " + row.meterName + " 数据, 是否继续?",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      delUser(row.meterId).then((res: ResponseConfig) => {
        if (res.code == 200) {
          ElMessage.success(t("表单提交.删除成功"));
          getList();
        }
      });
    })
    .catch(() => {});
};
const selection = ref([]);
const handleselectionChangeRow = (rows:any,row:any) =>{
  if (!props.multiple) {
        if (rows.length > 1) {
         
        tableV2Ref.value.tableRef().toggleRowSelection(rows[0],false)
        } else {
          selection.value = rows
        }
      } else {
        selection.value = rows
      }
}
 const submitData = () =>{
  if (props.multiple) {
        if (selection.value.length == 0) {
          ElMessage.warning("请选择数据");
          return;
        }else{
          values.value = selection.value.map((item:any)=>item[props.options.label]).join(",");
           emit("update:modelValue", selection.value.map((item:any)=>item[props.options.value]));
        }
      } else {
        if (selection.value.length == 0) {
          ElMessage.warning("请选择数据");
          return;
        }else{
             values.value = selection.value[0][props.options.label]
           emit("update:modelValue", selection.value[0][props.options.value]);
        }
      }
   //
   dialogVisible.value = false;
 }
</script>

<style scoped lang="scss"></style>
